<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/styles/mall/index.css">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<div class="mall-body" style="margin-right: 50px">
    <div class="pagetitle" th:if="${matches.getStatecompetition() == 0}">
        <h1 th:style="'color:red;'"><i class="bi bi-eye-slash"></i>未发布</h1>
    </div>
    <div class="pagetitle" th:if="${matches.getStatecompetition() == 1}">
        <h1 th:style="'color:green;'"><i class="bi bi-eye"></i>已发布</h1>
    </div>
    <div id="homeBanner" class="carousel slide home-banner">
        <form id="competitionForm" action="/competition/updateMatch" method="post">
            <input id="shipping-address-id" type="hidden" name="id" value=""/>
            <div class="modal-body">
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" ><i class="bi bi-filetype-jpg"></i>比赛海报</label>
                        <img th:src="${matches.getPoster()}" width="1300" height="500"  class="goods-image"/>
                    </div>
                    <div class="col-md-2"></div> <!-- 增加空白列 -->
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="raceBelongsEvent" class="col-form-label">比赛所属赛事</label>
                        <input class="form-control" id="raceBelongsEvent" name="province" th:value="${competitions.getComname()}">
                        <input class="form-control" type="hidden" name="matchid" th:value="${matches.getMatchid()}">
                        <input type="hidden" class="form-control"  name="comid"  th:value="${competitions.getComid()}">
                        <div id="raceBelongsEventError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="startdate" class="col-form-label"><i class="bi bi-clock"></i>比赛开始时间</label>
                        <input type="date" class="form-control" id="startdate" name="startdate" th:value="${#dates.format(matches.getStartdate(), 'yyyy-MM-dd')}">
                        <div id="startdateError" class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="enddate" class="col-form-label"><i class="bi bi-clock"></i>比赛结束时间</label>
                        <input type="date" class="form-control" id="enddate" name="enddate" th:value="${#dates.format(matches.getEnddate(), 'yyyy-MM-dd')}">
                        <div id="enddateError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="finaldate" class="col-form-label"><i class="bi bi-clock"></i>决赛时间</label>
                        <input type="date" class="form-control" id="finaldate" name="finaldate" th:value="${#dates.format(matches.getFinaldate(), 'yyyy-MM-dd')}">
                        <div id="finaldateError" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-row mb-3">

                       <div class="form-group col-md-5">
                            <label for="finalVenue" class="col-form-label"><i class="bi bi-geo-alt-fill"></i>决赛地点</label>
                            <input class="form-control" id="finalVenue" name="finallocation" th:value="${matches.getFinallocation()}">
                            <div id="finalVenueError" class="invalid-feedback"></div>
                        </div>



                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="joindeadline" class="col-form-label"><i class="bi bi-clock"></i>报名截止时间</label>
                        <input type="date" class="form-control" id="joindeadline" name="joindeadline" th:value="${#dates.format(matches.getJoindeadline(), 'yyyy-MM-dd')}">
                        <div id="joindeadlineError" class="invalid-feedback"></div>
                    </div>

                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="sponsorCorporateContact" class="col-form-label"><i class="bi bi-person-fill"></i>赞助企业联络人</label>
                        <input class="form-control" id="sponsorCorporateContact" name="sponsorcontact" th:value="${matches.getSponsorcontact()}">
                        <div id="sponsorCorporateContactError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="courseManager" class="col-form-label"><i class="bi bi-person-fill"></i>课程负责人</label>
                        <input class="form-control" id="courseManager" name="courseleader" th:value="${matches.getCourseleader()}">
                        <div id="courseManagerError" class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="qualityTeacher" class="col-form-label"><i class="bi bi-person-fill"></i>素质教师</label>
                        <input class="form-control" id="qualityTeacher" name="gradeinstructor" th:value="${matches.getGradeinstructor()}">
                        <div id="qualityTeacherError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="refereeInformation" class="col-form-label"><i class="bi bi-person-fill"></i>裁判信息</label>
                        <input class="form-control" id="refereeInformation" name="enterprisejudges" th:value="${matches.getEnterprisejudges()}">
                        <div id="refereeInformationError" class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="standardForEvaluation" class="col-form-label"><i class="bi bi-list-stars"></i>评分标准</label>
                        <input class="form-control" id="standardForEvaluation" name="scoringcriteria" th:value="${matches.getScoringcriteria()}">
                        <div id="standardForEvaluationError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label for="competitionPrizeDescription" class="col-form-label"><i class="bi bi-trophy"></i>赛事奖品说明</label>
                        <input class="form-control" id="competitionPrizeDescription" name="awardintroduction" th:value="${matches.getAwardintroduction()}">
                        <div id="competitionPrizeDescriptionError" class="invalid-feedback"></div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <a th:href="${'/competition/commitMatch?matchId=' + matches.getMatchid()}">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bi bi-reply-all-fill"></i>发布</button>
                </a>
                <button type="submit" class="btn btn-success"><i class="bi bi-repeat"></i>更改</button>
            </div>
            <div th:replace="common/competition-common::mall-footerWithoutsidebar"></div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>


<script>
    $(document).ready(function() {
        $('form').on('submit', function(e) {
            var valid = true;
            var startDate = new Date($('#startdate').val());
            var endDate = new Date($('#enddate').val());
            var finalDate = new Date($('#finaldate').val());
            var joindeadline = new Date($('#joindeadline').val());

            // 清空之前的错误消息
            $('.invalid-feedback').text('');

            if (startDate > endDate) {
                $('#enddateError').text("比赛结束时间不能在比赛开始时间之前！").show();
                valid = false;
            }

            if (finalDate < startDate || finalDate > endDate) {
                $('#finaldateError').text("决赛时间必须在比赛开始和结束时间之间！").show();
                valid = false;
            }
            if (joindeadline >= startDate) {
                $('#joindeadlineError').text("报名截止日期必须在比赛开始之前！").show();
                valid = false;
            }

            if (!valid) {
                e.preventDefault();
            }
        });
    });
</script>
</body>
</html>
